<template>
	<div class="wrap">
		<header-v></header-v>
		<section class="container">
			<div class="banner">
				<swiper auto loop dots-position='center'>
		    		<div v-for="item in carousel">
		      			<swiper-item><img :src="item" /></swiper-item>
		     		</div>
		   		</swiper>
			</div>
			<div class="content">
				<consult-v></consult-v>
				<nav-v class="nav"></nav-v>
				<div class="introduce">
					<p class="con">{{ introduce }}</p>
					<div class="num" :style="num_bg">
						<div class="shade"></div>
						<div class="number">
							<div v-for="item in num"><p> <span class="num_title">{{ item.num }}</span> + </p> <span>{{ item.desc }}</span> </div>
						</div>
					</div>
				</div>
				<div class="case">
					<div class="title"><p>成功案例</p><em></em></div>
					<div class="content">
					  	<div v-for="(item, index) in list">
					    	<img class="previewer-demo-img" :src="item.src" width="100" @click="show(index)">
					    	<router-link to="/caseMsg">{{ item.desc }}</router-link>
					    </div>
					    <div v-transfer-dom>
					      <previewer :list="list" ref="previewer" :options="options"></previewer>
					    </div>
					    <router-link to="/caseList" class="btn"> 更多案例  </router-link>
					</div>
				</div>
				<div class="cooperate">
					<div class="title"><p>合作客户</p><em></em></div>
					<swiper auto loop height="1.24rem" class="carousel_2" dots-position="center">
			      		<swiper-item v-for="item in carousel_2">
			      			<img :src="item.src" alt="" />
			      			<img :src="item.src2" alt="" />
			      			<img :src="item.src3" alt="" />
			      		</swiper-item>
			  		</swiper>
				</div>
				<div class="news">
					<div class="tab">
						<a href="javascript:;" @click="newsTab" :class="{ active : news1 }">墙绘百科</a>
						<a href="javascript:;" @click="newsTab" :class="{ active : news2 }">行业动态</a>
						<a href="javascript:;" @click="newsTab" :class="{ active : news3 }">企业动态</a>
					</div>
					<div class="con">
						<transition name="vux-pop-in">  
							<div v-if="news1" class="newsBox">
								<panel :list="list1" :type="type"></panel>
							</div>
						</transition>  
						
						<transition name="vux-pop-in">  
							<div v-if="news2" class="newsBox">
								<panel :list="list2" :type="type"></panel>
							</div>
						</transition> 
						
						<transition name="vux-pop-in">  
							<div v-if="news3" class="newsBox">
								<panel :list="list3" :type="type"></panel>
							</div>
						</transition>
						
					</div>
				</div>
				
			</div>
		</section>
		<footer-v></footer-v>
	</div> 
</template>


<script>
import header from './public/header'
import footer from './public/footer'
import consult from './public/consult'
import nav from './public/nav'
import carousel_1 from '../assets/carousel_1.jpg'
import carousel_2 from '../assets/carousel_3.jpg'
import carousel_3 from '../assets/carousel_3.jpg'
import carousel_4 from '../assets/carousel_4.jpg'
import num_bg from '../assets/num_bg.jpg'

import case_1 from '../assets/case_1.jpg'
import case_2 from '../assets/case_2.jpg'
import case_3 from '../assets/case_3.jpg'
import case_4 from '../assets/case_4.jpg'
import case_5 from '../assets/case_5.jpg'
import case_6 from '../assets/case_6.jpg'

import cooperate_1 from '../assets/cooperate_1.jpg'
import cooperate_2 from '../assets/cooperate_2.jpg'
import cooperate_3 from '../assets/cooperate_3.jpg'
import cooperate_4 from '../assets/cooperate_4.jpg'
import cooperate_5 from '../assets/cooperate_5.jpg'
import cooperate_6 from '../assets/cooperate_6.jpg'
import cooperate_7 from '../assets/cooperate_7.jpg'
import cooperate_8 from '../assets/cooperate_8.jpg'
import cooperate_9 from '../assets/cooperate_9.jpg'

import {Swiper, SwiperItem, Previewer, TransferDom, Panel } from 'vux'

export default {
	
  components: {
  	headerV : header, footerV : footer, consultV : consult, navV : nav, Swiper, SwiperItem, Previewer, Panel
  },
  directives: {
    TransferDom
  },
  methods: {
    show (index) {
      this.$refs.previewer.show(index)
    },
    newsTab (ev){
    	if(ev.target.innerHTML == '墙绘百科'){
    		this.news1 = true;
    		this.news2 = false;
    		this.news3 = false;
    	}else if(ev.target.innerHTML == '行业动态'){
    		this.news1 = false;
    		this.news2 = true;
    		this.news3 = false;
    	}else{
    		this.news1 = false;
    		this.news2 = false;
    		this.news3 = true;
    	}
    }
  },
  data () {
    return {
      	carousel : [
			carousel_1, carousel_2, carousel_3, carousel_4
    	],
    	carousel_2 : [
    		{
    			src : cooperate_1,
    			src2 : cooperate_2,
    			src3 : cooperate_3
    		},
    		{
    			src : cooperate_4,
    			src2 : cooperate_5,
    			src3 : cooperate_6
    		},
    		{
    			src : cooperate_7,
    			src2 : cooperate_8,
    			src3 : cooperate_9
    		}
    	],
    	introduce : "广州某某文化传播有限公司属正规注册手绘壁画公司，专业从事手绘墙画，致力于室内外墙面彩绘壁画装饰的企业。多年来，我们一直全心致力于高水准设计，专业化制作，高品质施工，用心的服务，我们充分考虑环境与人文的和谐统一，以倡导文明，宣传公益，健康运动，绿色环保宣传城市文化为己任，为您打造时尚有品位的家居生活和人文环境。",
    	num_bg : "background:url('"+ num_bg +"') center center no-repeat",
    	num : [
    		{num : '50',desc : '顶级设计师'},
    		{num : '2000',desc : '接收订单量'},
    		{num : '1200000',desc : '累计成交金额'},
    		{num : '4000',desc : '总案例量'},
    	],
	    list: [
	      	{src: case_1,w: 800, h: 400, desc : "某某手绘墙画" },
		    {src: case_2,desc : "某某油画定制" }, 
		    {src: case_3,desc : "某某3D壁画"}, 
		    {src: case_4,desc : "某某漆画"}, 
		    {src: case_5,desc : "某某手绘壁画" }, 
		    {src: case_6,desc : "某某浮雕雕塑"}
	    ],
	    options: {
	        getThumbBoundsFn (index) {
	          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
	          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
	          let rect = thumbnail.getBoundingClientRect()
	          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
	        }
	    },
	    news1 : true,
	    news2 : false,
	    news3 : false,
	    type : '1',
    	list1 : [
			{
		       title: '如何选择一个专业的墙绘公司？',
		       desc: "2016-12-29    阅读: 10366",
		       url : '/newsMsg'
		    }, 
	    ],
    	list2 : [
			{
		       title: '成都一停车场石墩被涂鸦 变身各种动物头像',
		       desc: "2016-10-20    阅读: 2756",
		       url : '/newsMsg'
		    }, 
	    ],
    	list3 : [
			{
		       title: '北京非鱼墙绘品牌网站全新上线',
		       desc: "2016-11-01    阅读: 2401",
		       url : '/newsMsg'
		    }, 
	    ],
    }
  }
}

</script>

<style type="text/css" scoped>
	/* index.style */
	
	.banner img{
		width: 100%; height: 1.69rem;
	}	
	
	.content .title{
		width:50%; margin: 0 auto; position: relative; border-bottom: 0.02rem solid #ccc;  margin-bottom: 0.3rem;  padding-top: 0.2rem;
	}
	.content .title p{
		font-size: 0.24rem; width: 60%; margin: 0 auto; text-align: center; line-height: 0.7rem;
	}
	.content .title em{
		width: 40%; height: 0.02rem; background: #F54F36; position: absolute; left: 30%;
	}
	.introduce .con{
		padding: 0.3rem 0.2rem; color:#696969; text-indent: 1em; line-height: 0.25rem;
	}
	.num{
		width: 100%; height: 1.69rem; position: relative; background-size: 100% 100% !important; color: #fff;
	}
	.num .shade{
		width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute;
	}
	.num div:nth-of-type(2){
		position: relative;
	}
	.num .number{
		overflow: hidden;
	}
	.num .number div{
		float: left; width: 37%; margin-left: 0.41rem; margin-top: 0.18rem;
	}
	.num .num_title{
		font-size: 0.24rem;
	}
	
	.case{
		background: #f7f7f7; overflow: hidden;
	}
	.case .content{
		overflow: auto;
	}
	.case .content div{
		width: 32%; text-align: center; float: left;
	}
	.case .content div:nth-of-type(2),.case .content div:nth-of-type(5){
		margin-left: 0.064rem; margin-right: 0.064rem;
	}
	.case .content div:nth-of-type(5){
		margin-bottom: 0.15rem;
	}
	.case .content a{
		line-height: 0.4rem; color: #000; display: block;
	}
	.case .content img{
		width:100%;
	}
	.case .content .btn{
		width: 1rem; clear: both; margin: 0.15rem auto; color: #fff; display: block; height: 0.35rem; background: #de402e; border-radius: 0.03rem; text-align: center; line-height: 0.35rem;
	}
	
	.carousel_2 img{
		width:0.88rem; height:0.7rem; margin-left: 0.12rem;
	}
	
	.news{
		height:1.7rem; width: 100%; background: #f7f7f7; padding-top: 0.3rem;
	}
	.news .tab a{
		color: #585858; margin-left: 0.15rem; height: 0.4rem; display: inline-block; float: left;
	}
	.news .tab .active{
		color: #0093dd;
	}
	.news .con{
		clear: both;
	}
</style>

<style>
	
	.vux-swiper-item{
		height: 0 !important;
	}
	.banner .vux-indicator i{
		width: 0.1rem !important; height: 0.1rem !important; border-radius: 0.1rem !important; background: #fff !important;
	}
	.banner .vux-indicator .active,.carousel_2 .vux-indicator .active{
		background-color: #f8c300 !important;
	}	
	.banner .vux-slider > .vux-swiper{
		width: 100%; height: 1.69rem !important;
	}
	.carousel_2 .vux-indicator i{
		width: 0.1rem !important; height: 0.1rem !important; border-radius: 0.1rem !important; background: #0093dd !important;
	}
	
	.nav{
		width: 100%;
	}
	
	.news .weui-media-box__title{
		font-size: 0.16rem !important; line-height: 0.35rem; height: 0.5rem;
	}
	.news .weui-media-box__desc{
		font-size: 0.12rem;
	}
</style>  